<template>
  <f7-page>
    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div> -->

    <div class="header">

      <qm-top-three class="top-three">
        <div
          slot="one"
          class="one"
          style="background-image: url('static/img/home/home-3/top-three-1.svg')"
        >
          <div>
            <div class="title">访客预约</div>
            <f7-button
              class="btn"
              text="去预约"
              round
              fill
              color="white"
            ></f7-button>
          </div>
        </div>
        <div
          slot="two"
          class="two"
          style="background-image: url('static/img/home/home-3/top-three-2.svg')"
        >
          <div>
            <div class="title">
              会议室预约
            </div>
          </div>
        </div>
        <div
          slot="three"
          class="three"
          style="background-image: url('static/img/home/home-3/top-three-3.svg')"
        >
          <div>
            <div class="title">
              群众反馈
            </div>
          </div>
        </div>
      </qm-top-three>
    </div>


    <f7-block class="function-list">
      <qm-entry
        class="item"
        v-for="(item, index) in entry"
        :key="index"
        :data="item"
        iconWidth="64"
      ></qm-entry>
    </f7-block>

    <f7-block style="margin: 0;">
      <f7-swiper class="qm-swiper swiper" pagination>
        <f7-swiper-slide v-for="item in 3" :key="item">
          <div class="slide-box">
            <div class="left">
              <div class="title">会议系统全新上线</div>
              <div class="subtitle">随时随刻 在线预约</div>
            </div>
            <div class="right">
              <img src="static/img/home/home-3/swiper.svg" alt="" />
            </div>
          </div>
        </f7-swiper-slide>
      </f7-swiper>
    </f7-block>

    <qm-block title="机关资讯">
      <f7-link
        href="#"
        slot="after-title"
        style="color: var(--color-text-subtext)"
      >
        更多资讯
        <f7-icon
          f7="chevron_right"
          style="font-size: var(--font-size-subcontent-2)"
        ></f7-icon>
      </f7-link>
      <div class="consult">
        <qm-consult-list
          v-for="(item, index) in consult"
          :key="index"
          :data="item"
          :reverse="true"
          class="consult-list"
        ></qm-consult-list>
      </div>
    </qm-block>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      entry: [
        {
          image: "static/img/home/home-3/entry-1.svg",
          title: "电子卡",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-2.svg",
          title: "充值",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-3.svg",
          title: "充值记录",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-4.svg",
          title: "考勤打卡",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-5.svg",
          title: "消费记录",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-6.svg",
          title: "我的订单",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-7.svg",
          title: "退款申请",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-3/entry-8.svg",
          title: "加班",
          href: "/business/index",
        },
      ],
      consult: [
        {
          image: "static/img/home/consult-1.png",
          title: "银行利率已经上调5%，将影响楼…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "天津市滨海新区8项指标成为全…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "开展照片征集活动通知",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "疫情防控不放松 个人防护第一位 进一步做好预防",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-2.png",
          title: "天津市滨海新区13项指标成为全国标杆",
          time: "2022-03-16  12:00",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  height: calc(474px * var(--ratio));
  background-image: url('../../../../static/img/home/home-3/bg-home3.svg');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .top-three {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.one,
.two,
.three {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-text-base);
      font-size: var(--font-size-subtitle);
      &>div{
        width: 100%;
        height: 100%;
      }
}

.one {
  padding: calc(31px * var(--ratio)) calc(26px * var(--ratio));
  .btn {
    margin-top: calc(30px * var(--ratio));
    width: calc(128px * var(--ratio));
    height: calc(50px * var(--ratio));
    line-height: calc(50px * var(--ratio));
    --f7-button-fill-text-color: #566eee;
  }
}

.two,.three {
    padding-left: 33.73%;
    .title {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      // padding-left: calc(24px * var(--ratio));
      display: inline-flex;
      align-items: center;
      &-icon {
        font-size: calc(52px * var(--ratio));
        margin-right: calc(29px * var(--ratio));
      }
    }
  }

.function-list {
  margin-top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: calc(46px * var(--ratio));
  & > .item {
    // width: 100%;
    margin: 0 auto;
  }
}

.swiper {
  height: calc(175px * var(--ratio));
  border-radius: calc(16px * var(--ratio));
  overflow: hidden;
  .slide-box {
    height: 100%;
    display: flex;
    justify-items: center;
    justify-content: space-around;
    background: linear-gradient(180deg, #f3f7ff 0%, #f2f7ff 100%);
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 600;
      color: #223a61;
      font-size: calc(34px * var(--ratio));
      .subtitle {
        color: #737c98;
        font-weight: 400;
        font-size: var(--font-size-subcontent-2);
      }
    }
    .right {
      width: calc(175px * var(--ratio));
      height: calc(175px * var(--ratio));
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.consult {
  margin-top: -10px;
  .consult-list:first-child {
    padding-top: 0;
  }
}
</style>
